<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>表单布局</title>
<!-- KUI -->
<link rel="stylesheet" href="../../../style/kelat.css" media="all"/>
<!-- 扩展样式 -->
<link rel="stylesheet" href="../../../style/theme.css" media="all"/>

<style>
        .GridShow .Row{margin-bottom:10px;}
        .GridShow [class^=Col]{border:1px solid #ccc;background-color:#fff;line-height:20px;padding:5px;margin-bottom:5px}
    </style>
</head>
<body >
<div>
   <div class="HelpBox">
   
    <h2>表单布局</h2>
    <h3>概述</h3>
    <div class="desc">
      <p>使用表单布局创建响应式的精美的表单布局。表单布局就是 列表，但是会有一些拓展。</p>
    </div>
    <div class="example GridShow">
      <h3>实例</h3>
      <h4>简单的表单布局:</h4>
	  <pre><code>&lt;div class="ListBlock">
  &lt;ul>
    ...
    &lt;li>
      &lt;div class="ItemCon">
        &lt;div class="ItemMedia">... icon here ...&lt;/div>
        &lt;div class="ItemInner">
          &lt;div class="ItemTitle Label">Name&lt;/div>
          &lt;div class="ItemInput">
              &lt;input type="text" name="name">
          &lt;/div>
        &lt;/div>
      &lt;/div>
    &lt;/li>
    ...
  &lt;/ul>
&lt;/div>
</code></pre>	  
	 <p>从上面的例子可以看出，表单布局几乎和 列表 一样，但是有如下一些不同：</p> 
	 <ul class="List">
		<li>ItemTitle - 单行的Label，应该有一个额外的 Label class。可选的</li>
		<li>ItemInput - 包含了你的表单输入框等。 必选。</li>
	</ul>
	<h4>完整的布局:</h4>

      <pre><code>&lt;ul class="ListBlock">
    &lt;li class="ListItem">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-user.svg" alt="用户">
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle Label">姓名&lt;/div>
                &lt;div class="ItemInput">
                    &lt;input class="InputContr" type="text" placeholder="您的姓名">
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/li>
    &lt;li class="ListItem">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-noread.svg" alt="邮箱">
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle Label">邮箱地址&lt;/div>
                &lt;div class="ItemInput">
                    &lt;input class="InputContr" type="email" placeholder="您的邮箱">
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/li>
    &lt;li class="ListItem">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-wangluo.svg" alt="网络">
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle Label">网址&lt;/div>
                &lt;div class="ItemInput">
                    &lt;input class="InputContr" type="url" placeholder="请输入网址">
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/li>
    &lt;li class="ListItem">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-password.svg" alt="密码">
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle Label">密码&lt;/div>
                &lt;div class="ItemInput">
                    &lt;input class="InputContr" type="password" placeholder="请输入密码">
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/li>
    &lt;li class="ListItem">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-call.svg" alt="电话">
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle Label">电话&lt;/div>
                &lt;div class="ItemInput">
                    &lt;input class="InputContr" type="tel" placeholder="请输入电话号码">
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/li>
    &lt;li class="ListItem">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-gender.svg" alt="性别">
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle Label">性别&lt;/div>
                &lt;div class="ItemInput">
                    &lt;select class="InputContr">
                        &lt;option value="男">男&lt;/option>
                        &lt;option value="女">女&lt;/option>
                    &lt;/select>
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/li>
    &lt;li class="ListItem">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-date.svg" alt="日期">
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle Label">出生日期&lt;/div>
                &lt;div class="ItemInput">
                    &lt;input type="date" class="InputContr" placeholder="出生日期" value="2014-04-30">
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/li>
    &lt;li class="ListItem">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-date.svg" alt="日期">
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle Label">日期时间&lt;/div>
                &lt;div class="ItemInput">
                    &lt;input type="datetime-local" class="InputContr" placeholder="出生日期" value="2014-04-30">
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/li>
    &lt;li class="ListItem">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-toggleoff.svg" alt="开关">
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle Label">开关&lt;/div>
                &lt;div class="ItemInput">
                    &lt;label class="LabelSwitch">
                        &lt;input type="checkbox">
                        &lt;div class="checkbox">&lt;/div>
                    &lt;/label>
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/li>
    &lt;li class="ListItem AlignTop">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-message.svg" alt="消息">
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle Label">备注&lt;/div>
                &lt;div class="ItemInput">
                    &lt;textarea class="InputContr ">&lt;/textarea>
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/li>
    &lt;li class="ListItem AlignTop">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-message.svg" alt="消息">
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle Label">调整大小&lt;/div>
                &lt;div class="ItemInput">
                    &lt;textarea class="InputContr Resizeable">&lt;/textarea>
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/li>
&lt;/ul>
</code></pre>
      <h4>展示效果:</h4>
      
      
      <ul class="ListBlock" style="width:50%">
        <li class="ListItem">
            <div class="ItemCon">
                <div class="ItemMedia">
                    <img class="Icon" src="../../../images/svg/iconfont-user.svg" alt="用户">
                </div>
                <div class="ItemInner">
                    <div class="ItemTitle Label">姓名</div>
                    <div class="ItemInput">
                        <input class="InputContr" type="text" placeholder="您的姓名">
                    </div>
                </div>
            </div>
        </li>
        <li class="ListItem">
            <div class="ItemCon">
                <div class="ItemMedia">
                    <img class="Icon" src="../../../images/svg/iconfont-noread.svg" alt="邮箱">
                </div>
                <div class="ItemInner">
                    <div class="ItemTitle Label">邮箱地址</div>
                    <div class="ItemInput">
                        <input class="InputContr" type="email" placeholder="您的邮箱">
                    </div>
                </div>
            </div>
        </li>
        <li class="ListItem">
            <div class="ItemCon">
                <div class="ItemMedia">
                    <img class="Icon" src="../../../images/svg/iconfont-wangluo.svg" alt="网络">
                </div>
                <div class="ItemInner">
                    <div class="ItemTitle Label">网址</div>
                    <div class="ItemInput">
                        <input class="InputContr" type="url" placeholder="请输入网址">
                    </div>
                </div>
            </div>
        </li>
        <li class="ListItem">
            <div class="ItemCon">
                <div class="ItemMedia">
                    <img class="Icon" src="../../../images/svg/iconfont-password.svg" alt="密码">
                </div>
                <div class="ItemInner">
                    <div class="ItemTitle Label">密码</div>
                    <div class="ItemInput">
                        <input class="InputContr" type="password" placeholder="请输入密码">
                    </div>
                </div>
            </div>
        </li>
        <li class="ListItem">
            <div class="ItemCon">
                <div class="ItemMedia">
                    <img class="Icon" src="../../../images/svg/iconfont-call.svg" alt="电话">
                </div>
                <div class="ItemInner">
                    <div class="ItemTitle Label">电话</div>
                    <div class="ItemInput">
                        <input class="InputContr" type="tel" placeholder="请输入电话号码">
                    </div>
                </div>
            </div>
        </li>
        <li class="ListItem">
            <div class="ItemCon">
                <div class="ItemMedia">
                    <img class="Icon" src="../../../images/svg/iconfont-gender.svg" alt="性别">
                </div>
                <div class="ItemInner">
                    <div class="ItemTitle Label">性别</div>
                    <div class="ItemInput">
                        <select class="InputContr">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                </div>
            </div>
        </li>
        <li class="ListItem">
            <div class="ItemCon">
                <div class="ItemMedia">
                    <img class="Icon" src="../../../images/svg/iconfont-date.svg" alt="日期">
                </div>
                <div class="ItemInner">
                    <div class="ItemTitle Label">出生日期</div>
                    <div class="ItemInput">
                        <input type="date" class="InputContr" placeholder="出生日期" value="2014-04-30">
                    </div>
                </div>
            </div>
        </li>
        <li class="ListItem">
            <div class="ItemCon">
                <div class="ItemMedia">
                    <img class="Icon" src="../../../images/svg/iconfont-date.svg" alt="日期">
                </div>
                <div class="ItemInner">
                    <div class="ItemTitle Label">日期时间</div>
                    <div class="ItemInput">
                        <input type="datetime-local" class="InputContr" placeholder="出生日期" value="2014-04-30">
                    </div>
                </div>
            </div>
        </li>
        <li class="ListItem">
            <div class="ItemCon">
                <div class="ItemMedia">
                    <img class="Icon" src="../../../images/svg/iconfont-toggleoff.svg" alt="开关">
                </div>
                <div class="ItemInner">
                    <div class="ItemTitle Label">开关</div>
                    <div class="ItemInput">
                        <label class="LabelSwitch">
                            <input type="checkbox">
                            <div class="checkbox"></div>
                        </label>
                    </div>
                </div>
            </div>
        </li>
        <li class="ListItem AlignTop">
            <div class="ItemCon">
                <div class="ItemMedia">
                    <img class="Icon" src="../../../images/svg/iconfont-message.svg" alt="消息">
                </div>
                <div class="ItemInner">
                    <div class="ItemTitle Label">备注</div>
                    <div class="ItemInput">
                        <textarea class="InputContr "></textarea>
                    </div>
                </div>
            </div>
        </li>
        <li class="ListItem AlignTop">
            <div class="ItemCon">
                <div class="ItemMedia">
                    <img class="Icon" src="../../../images/svg/iconfont-message.svg" alt="消息">
                </div>
                <div class="ItemInner">
                    <div class="ItemTitle Label">调整大小</div>
                    <div class="ItemInput">
                        <textarea class="InputContr Resizeable"></textarea>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    
    
   </div>

</div>

</div>
</body>
</html>
